<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__ADMIN__/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="__ADMIN__/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>添加用户组</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" lay-filter="authForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户组</label>
                            <div class="layui-input-inline">
                                <select name="auth" lay-verify="required" id="authListSelect">
                                  </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-addauth-btn">添 加</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>
<script src="__ADMIN__/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="__ADMIN__/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layuimini = layui.layuimini;

        var collectionId = parent.$('#hideCollectionId').val();
        table.render({
            elem: '#currentTableId',
            url: '/admin/user/auth-list/' + collectionId,
            parseData: function(res){
                if(res.code < 0) {
                    return {"msg": res.msg}
                }
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "data": res.data.groups
                };
            },
            response: {
                statusCode: 1 //规定成功的状态码，默认：0
            },
            cols: [[
                {field: 'name', title: '账号'},
                {title: '操作', Width: 150, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]],
            page: false
        });
        var addData = layer.load();
        $.ajax({
            url: '/admin/group',
            success: function (res) {
                if(res.code < 0) {
                    layer.close(addData);
                    layer.msg(res.msg, {
                        icon: 2,
                        time: 1000,
                        shade: 0.1
                    }, function () {
                        closeThis();
                    });
                    return false;
                }
                const authListSelect = res.data
                let html = '';
                authListSelect.forEach(elm => {
                    html += '<option value="'+ elm.id +'">' + elm.name + '</option>'
                });
                $('#authListSelect').append(html);
                renderForm();
                layer.close(addData);
            }
        })

        // 监听搜索操作
        form.on('submit(data-addauth-btn)', function (res) {
            const data = res.field;
            $.ajax({
                url: '/admin/user/auth-add/' + collectionId + '/' + data.auth,
                success: function(res) {
                    layer.msg(res.msg, {
                        icon: res.code < 0 ? 5 : 1,
                        time: 1000,
                        shade: 0.1
                    }, function () {
                        if(res.code > 0){
                            table.reload('currentTableId');
                        }
                    });
                }
            })
            return false;
        });
        // 监控修改删除
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                const title = '您是否要删除：' + data.name + ' 规则组？'
                layer.confirm(title, function (index) {
                    $.ajax({
                        url: '/admin/user/auth-del/' + collectionId + '/' + data.id,
                        method: 'delete',
                        success: function (res) {
                            layer.msg(res.msg, {
                                icon: res.code < 0 ? 2 : 1,
                                time: 500,
                                shade: 0.1
                            }, function () {
                                if(res.code > 0)
                                    obj.del();
                                layer.close(index);
                            });
                        }
                    })
                });
            }
        });
        function closeThis(re = false)
        {
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            if(re)
                parent.$('#isReload').val('yes');
            parent.layer.close(iframeIndex);
        }
        function renderForm(){
            layui.use('form', function(){
                var form = layui.form;
                form.render();
            });
        }
    });
</script>
<script>

</script>

</body>
</html>